<!--
	作者：931547491@qq.com
	时间：2015-11-20
	描述：浮动的学习
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css知多少浮動</title>
	</head>
	<body>
	<!--
		1.误解与误用:
    		浮動最初的設計是為了文字环绕，只是为了文字环绕
    	2.破坏性 float元素相对于父元素脱离文档流，仅仅是相对于父元素与其他元素无关，比如他上面的文字
    		img:float:left后脱离文档流，它的父容器直接坍塌了
    		浮动必须要脱离文档流才能让让其父元素不会应为他而改变，而被文字自由的撑开
    	3.float之后会自动变为display:block
    -->
    <div>这是上面一段文字啊啊啊啊</div>
    <div style="border: 1px solid red;">
    	<img src="img/test.png" width="200" style="float: left;"/>
    但是，当时的多列布局和横向排版主要是依靠table实现，后来人们见见的发现，使用table将导致代码量大、混乱、不利于SEO，然后发现float+div是一个很不错的排版解决方案，于是乎——过去几年“css+div”页面排版一直是一个热门话题，也是各种高大上的面试题必考的一项。
	请参见地址:video/float1.mp4的演示
    </div>
    <!--<video src="video/float1.mp4" controls="controls">
	</video>-->
    </body>
</html>
